
{% extends 'layout.html' %}



{% block title %}{{ title }}{{ version|formatVersion }}{% endblock %}

{% block lib %}
<script src="https://cdn.bootcss.com/axios/0.17.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/praise-button-babel.js"></script>
{% endblock %}
{% block head-script %}
<script>

      //SystemJS.import('../praise-button.js');
    //未完成内容：
    //1.SystemJS未能成功import
    //2.用CSS画手，知道怎么画，但因时间问题未完成
    (function($){
      $.fn.PraiseButton =  function (width) {
        var btn = new Thumb(this.get(0));
        btn.buttonWidth = width;
        
        //根据后台数据，初始化PraiseButton
        console.time('get praise count');
        axios.get('/index/index')
          .then(function (response) {
            let result = response.data;
            console.log(result);
            if(result.success){
              btn.init(result.result);
            }
            else{
              alert(result.errorMsg);
            }
            console.timeEnd('get praise count');
          })
          .catch(function (error) {
            console.log(error);
          });

        //PraiseButton自增时，后台数据同时自增
        btn.incEventHandle = function(){
            axios.post('/index/index')
              .then(function (response) {
                console.log(response.data);
              })
              .catch(function (error) {
                console.log(error);
              });
        }
      }

      
      
    })(jQuery);

    function onload(){$('#btnThumb').PraiseButton(80);}
  </script>
{% endblock %}
{% block bodyevent %}onload="onload()"
{% endblock %}
{% block content %}

<div id="btnThumb">
</div>

{% endblock %}